<script setup lang="ts">
  import {getCategoryList,getBrandList,getProList} from '@/api/kind'
  import {ref,onMounted} from 'vue'
  import type { Ref } from 'vue';
  import type { iPro } from '@/type/home';
  import { useRouter } from 'vue-router';

  const router=useRouter()
  
//获取分类列表
  const categorySelect=ref(0) //被选中的索引值
  const category =ref([]) //分类列表
  function getCategoryListData(){
    getCategoryList().then(res=>{
    //导入分类列表
    category.value=res.data.data
    //品牌列表需要在分类列表导出后才能导出
    getBrandListData()
  })
  }


//获取品牌列表
  const brandSelect=ref(0)
  const brand:Ref<{brand:string}[]> =ref([])
  function getBrandListData(){
    getBrandList({
      category:category.value[categorySelect.value]
    }).then(res=>{
      console.log('品牌:',res);
      brand.value=res.data.data
      getProListData()
    })
  }

//获取商品列表
const pro:Ref<iPro[]>=ref([])
function getProListData(){
  getProList({
    category:category.value[categorySelect.value],
    brand:brand.value[brandSelect.value].brand
  }).then(res=>{
    console.log('商品:',res);   
    pro.value=res.data.data
  })
}

  //生命周期中调用请求
  onMounted(()=>{
    //获取分类
    getCategoryListData()
    //重新渲染列表
    getBrandListData()
  })
  


  //切换分类
  function categoryChange(index:number){
    brandSelect.value=0
    getBrandListData()
  }

  //切换品牌
  function brandChange(){
    getProListData()
  }


  //点击商品进入详情
  function goProDetail(proid:string){
    router.push({
      path:'/prodetail/'+proid,
    })
  }
</script>

<template>
<main class="box">
    <header class="header">
      <slot name="left"></slot>
      分类
      <slot name="right"></slot>
     </header>

    <div class="content">
      
      <div class="left">
        <!-- 渲染分类列表 -->
        <van-sidebar @change="categoryChange" v-model="categorySelect">
          <van-sidebar-item v-for="item in category" :key="item" :title="item" />
        </van-sidebar>
      </div>


      <div class="right">
        <!-- 渲染品牌列表 -->
        <van-tabs title-active-color="#f66" @change="brandChange"  v-model:active="brandSelect">
          <van-tab v-for="item in brand" :key="item.brand" :title="item.brand"></van-tab>
        </van-tabs>
        
        <!-- 渲染商品列表 -->
        <van-grid icon-size="64" :column-num="3">
          <van-grid-item @click="goProDetail(item.proid)" v-for="item in pro" :key="item.proid" :icon="item.img1" :text="item.brand" />
        </van-grid>

      </div>

     

    </div>
  </main>
</template>

<style scoped lang="scss">
   .content{
      display: flex;
      
      .left{
        width: 22%;
        height: 100%;
        overflow: auto;
      }

      .right{
        flex: 1;
      }
   }


</style>